body {
    background-color: #0F0F0F;
    color: white;
    font-family: 'Source Code Pro', monospace;
    border-radius: 10px;
}

input {
    font-family: 'Source Code Pro', monospace;
    font-weight: 500;
    background-color: #272727;
    color: #ffffff;
    border-radius: 5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 5px;
    border:none;
    outline: none;
    font-size: medium;
}

input:focus {
    background-color: #5a5858;
    border:none;
}
  
button {
    font-family: 'Source Code Pro', monospace;
    font-weight: 500;
    border:none;
    background-color: #272727;
    color: #ffffff;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 5px;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
}

button:hover {
    background-color: #5a5858;
}

.app {
    padding: 5px;
    border-radius: 5px;
    background-color: #272727;
    max-height: 65vw;
    max-width: 60vh;
    aspect-ratio: 1 / 1; 
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 5px;

}

.app:hover {
    background-color: #5a5858;
    cursor:pointer;
}
  
.appimg {
    margin-top: 5px;
    width: 100px;
    height: 100px;
    border-radius: 25px;
}
  
.appgrid {
    grid-template-columns: auto auto auto auto auto;
    margin: 0%;
    grid-gap: 10px; /* Add some gap between the grid items */
    justify-content: start;
    align-content: start; /* Align the grid items to the start */
}

.hideme {
  display: none;
}